<template>
  <ContainerContent
    :loading="loading"
    :show-pagination="false"
    :refresh="false">
    <template #header>
      <div class="flex justify-between items-center w-full">
        <a-radio-group
          v-model="selectRadio"
          type="button"
          class="h-32px"
          @change="changeRadio">
          <a-radio value="hour6" class="w-75px text-center">近6小时</a-radio>
          <a-radio value="today" class="w-75px text-center">今日</a-radio>
          <a-radio value="yesterday" class="w-75px text-center">昨日</a-radio>
        </a-radio-group>
        <a-date-picker
          v-model="timeDate"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 200px; height: 32px"
          :allow-clear="false"
          :disabled-date="disabledDate"
          :show-now-btn="false"
          class="ml-4"
          @change="handleDateRangePickerChange" />
        <a-select
          :style="{ width: '220px', height: '32px' }"
          v-model="queryData.region_id"
          placeholder="请选择区域"
          class="ml-4"
          @change="changeRegion">
          <a-option value="">全部区域</a-option>
          <a-option
            v-for="item in regionList"
            :key="item.id"
            :value="item.id"
            >{{ item.name }}</a-option
          >
        </a-select>
        <a-select
          :style="{ width: '220px' }"
          v-model="queryData.node_ids"
          placeholder="全部节点"
          multiple
          allow-clear
          :max-tag-count="1"
          class="ml-4 site_select"
          @popup-visible-change="changeSite"
          @clear="clearSite"
          @remove="clearSite">
          <template #header> </template>
          <a-option v-for="item in NodeList" :key="item.id" :value="item.id">{{
            item.name
          }}</a-option>
        </a-select>

        <div class="flex-1"></div>
        <a-button
          class="w-[30px]! h-[30px]! shrink-0 mr-[-16px]"
          @click="refreshData()">
          <template #icon>
            <i-icons-refresh size="4" :spin="loading" />
          </template>
        </a-button>
      </div>
    </template>
    <div>
      <LinkLineChart
        :time-date="timeDate"
        :params="queryData"
        :node-id="NodeIdList"
        :math-random="MathRandom"
        :is-hour="isHour" />
    </div>
  </ContainerContent>
</template>
<script lang="ts" setup>
import ContainerContent from '@/components/ContentContainer.vue'
import { getApiResolveRegionsListApi } from '@/apis/modules/resolve/area'
import { getApiNodeSimpleApi } from '@/apis/modules/resolve/statistics'
import dayjs from 'dayjs'
import LinkLineChart from '../components/LinkLineChart.vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const selectRadio = ref<string | undefined>('hour6')
const isHour = ref(true)

const loading = ref(false)
const queryData = reactive({
  region_id: '',
  node_ids: []
})

const timeDate = ref(dayjs().format('YYYY-MM-DD'))

/** 时间变化 */
const daysMap = {
  hour6: dayjs().subtract(6, 'hour').format('YYYY-MM-DD HH:mm'),
  today: dayjs().format('YYYY-MM-DD'),
  yesterday: dayjs().subtract(1, 'day').format('YYYY-MM-DD')
}

const changeRadio = (val: 'hour6' | 'today' | 'yesterday') => {
  if (val === 'hour6') {
    timeDate.value = daysMap.hour6
    isHour.value = true
  }
  if (val === 'today') {
    timeDate.value = daysMap.today
    isHour.value = false
  }
  if (val === 'yesterday') {
    timeDate.value = daysMap.yesterday
    isHour.value = false
  }
  changeState()
  getSiteSummary()
}
const handleDateRangePickerChange = (val: string) => {
  selectRadio.value = undefined
  const day = dayjs(val).format('YYYY-MM-DD')
  if (day === daysMap.today) {
    selectRadio.value = 'today'
  }
  if (day === daysMap.yesterday) {
    selectRadio.value = 'yesterday'
  }
  isHour.value = false
  changeState()
  getSiteSummary()
}

const MathRandom = ref(0)
//获取数据总量
const getSiteSummary = () => {
  MathRandom.value = Math.random() * 1
}
const regionList = ref<any>([])
const NodeList = ref<any>([])
const NodeIdList = ref<any>([])
//获取区域
const getRegions = () => {
  getApiResolveRegionsListApi({}).then((res) => {
    regionList.value = res.list || []
  })
  if (appStore.nodeStatistic.region_id) {
    queryData.region_id = appStore.nodeStatistic.region_id
  }
}

//初始化获取站点
const initChangeRegion = () => {
  getApiNodeSimpleApi({
    region_id: queryData.region_id
  }).then((res) => {
    NodeList.value = res || []
    if (appStore.nodeStatistic.node_ids.length > 0) {
      queryData.node_ids = appStore.nodeStatistic.node_ids
    } else {
      queryData.node_ids = []
    }

    NodeIdList.value = NodeList.value.map((item) => {
      return item.id
    })
    changeState()
    getSiteSummary()
  })
}

//获取站点
const changeRegion = () => {
  getApiNodeSimpleApi({
    region_id: queryData.region_id
  }).then((res) => {
    NodeList.value = res || []
    queryData.node_ids = []
    NodeIdList.value = NodeList.value.map((item) => {
      return item.id
    })
    changeState()
    getSiteSummary()
  })
}

//站点下拉关闭时查询
const changeSite = (open: boolean) => {
  if (!open) {
    changeState()
    getSiteSummary()
  }
}

//清空站点
const clearSite = () => {
  changeState()
  getSiteSummary()
}

const disabledDate = (current) => {
  if (current && current > dayjs().endOf('day')) {
    return true
  }
  // 禁用30天之前的日期
  if (current && current < dayjs().subtract(30, 'day').startOf('day')) {
    return true
  }
  return false
}

onMounted(() => {
  if (appStore.nodeStatistic.timeDate) {
    timeDate.value = appStore.nodeStatistic.timeDate
  }
  if (appStore.nodeStatistic.selectRadio) {
    selectRadio.value = appStore.nodeStatistic.selectRadio
  }
  isHour.value = appStore.nodeStatistic.isHour
  getRegions()
  initChangeRegion()
})

const changeState = () => {
  appStore.updateNodeStatistic({
    region_id: queryData.region_id,
    node_ids: queryData.node_ids,
    timeDate: timeDate.value,
    isHour: isHour.value,
    selectRadio: selectRadio.value
  })
}

//刷新
const refreshData = () => {
  changeState()
  getSiteSummary()
}
// watch(
//   () => timeDate.value,
//   (val) => {
//     if (val) {
//       if (queryData.node_ids.length > 0) {
//         getSiteSummary()
//       }
//     }
//   }
// )
</script>

<style>
.site_select {
  height: 32px !important;

  .arco-select-view-inner {
    padding-top: 1px !important;

    .arco-select-view-input {
      width: 64px !important;
    }
    .arco-select-view-input::placeholder {
      color: #393c40;
      font-size: 14px;
    }
  }
}
</style>
